<template>
  <div class="ad-page">
    <div class="count" @click="skip">跳过{{count}}</div>
    <div class="logo">
      <img src="../../assets/img/common/netmusic.svg" alt="">
    </div>
    <div class="font">
      <img src="../../assets/img/common/font.png" alt="">
    </div>
  </div>
</template>

<script>
    export default {
        name: "ADPage",
        data(){
          return{
            count:3,
          }
        },
        methods:{
            countdown(){
                const time_count = 3;
                if(!this.timer){
                    this.count = time_count;
                    this.show = false;
                    this.timer = setInterval(()=>{
                        if(this.count > 0 && this.count <= time_count){
                            this.count--;
                        }else{
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                            this.$router.push('/Find')
                        }
                    },1000)
                }

            },
            skip(){
                this.count = 0;
            }
        },
        created() {
            this.countdown()
        }
    }
</script>

<style scoped>
  .ad-page{
    width: 100%;
    height: 100vh;
    background-color: #d03123;
    position: relative;
  }

  .count{
    letter-spacing: 2px;
    font-size: 13px;
    border-radius: 10px;
    text-align: center;
    line-height: 25px;
    width: 60px;
    color: white;
    background-color: rgba(254,219,207,0.3);
    position: absolute;
    right: 30px;
    top: 30px;
  }
  
  .logo{
    position: absolute;
    left: calc(50% - 50px);
    top: 20%;
  }

  .logo img{
    width: 100px;
    height: 100px;
    background-color: #d94230;
    border-radius: 50px;
  }
  
  .font{
    position: relative;
    text-align: center;
    color: white;
    font-size: 18px;
    margin: 0 auto;
    top: calc(100vh - 90px);
  }
  
  .font img{
    width: 70%;
  }
  
</style>